﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
    <style>
        body {
            background-color: #ececed !important;
        }

        .scroll-content {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .user-block {
            background-color: #fff;
            border-radius: 3px;
            margin-bottom: 20px;
        }

        .user-info-wrapper {
            display: flex;
        }

        .avator {
            flex-basis: 29.71137521222411%;
            text-align: right;
            margin-right: 4.584040747028862%;
            margin-top: 4.584040747028862%;
        }

            .avator img {
                margin-left: 10px;
                max-width: 90%;
            }

        .user-info {
            flex-grow: 1;
        }

       

        .table-wrapper {
            flex: 1;
            background-color: #fff;
            padding-bottom: 10px;
        }

        .table {
            width: 100%;
        }

            .table thead th {
                padding: 5px;
                color: #fff;
                font-weight: normal;
                border-right: 2px solid #fff;
                background-color: #9aa3a8;
            }

                .table thead th:last-child {
                    border: none;
                }

        tbody {
            color: #5c6b73;
            text-align: center;
        }

            tbody td {
                padding: 5px 2px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
    </style>
</head>
<body>
    <div class="user-block">
        <div class="user-info-wrapper">
            <div class="avator">
                <img id="imgId" src="images/user-icon.png">
            </div>
            <div class="user-info">
                <h3><label id="lblTitleName"></label></h3>
                <p>
                    <span>卡號:<label id="lblCardNO"></label></span>&nbsp;&nbsp;
                    <span>編號:<label id="lblNO"></label></span>
                </p>
                <p>
                    <span>姓名:<label id="lblName"></label></span>&nbsp;&nbsp;
                    <span>有效期:<label id="lblExpiryDate"></label></span>
                </p>
                <p>
                    <span>注冊工種:<label id="lblWorkerType"></label></span>
                </p>
            </div>
        </div>
       
    </div>
    <div class="table-wrapper">
        <table class="table display" id="in_out_list" >
            <thead>
                <tr>
                    <th>日期</th>
                    <th>入/出</th>
                    <th>位置</th>
                    <th>生物認證</th>
                </tr>
            </thead>
            <tbody id="listcontent">
                
            </tbody>
        </table>
    </div>

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.dataTables.min.js"></script>
    <script type="text/javascript">

        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
        })(jQuery);

        $(function () {
           
            var testHost = "http://47.90.73.137:8089/";
            var testCard = "CWR16000108";

            var host = $.getUrlParam('host');
            var cardNo = $.getUrlParam('cwrNo');

            popuData(host, cardNo);
        });

        function popuData(host, cardNo) {

            popuWorkerInfo(host, cardNo);
            popuTableData(host, cardNo);
        }

        function popuWorkerInfo(apiHost, cardNo) {
            var URL = apiHost+"iGetData.ashx";            var data = { "ActionType": "getallworker", "ClientVersion": "1.0", "Data": "" };
          
            $.post(URL, { bgdata: JSON.stringify(data) }, function (result) {
                result = JSON.parse(result);
             
                if (result.ActionStatus === "1") {
                    
                    var details = JSON.parse(result.Result);
                    var worker = get(details, "CWRNo", cardNo);
                    if (worker.length > 0) {
                        var imgsrc = apiHost + worker[0].Photo;
                        $("#lblTitleName").text(worker[0].CName);
                        $("#lblCardNO").text(cardNo);
                        $("#lblNO").text(worker[0].RowID);
                        $("#lblName").text(worker[0].CName);
                        $("#lblExpiryDate").text(worker[0].CardExpiryDate);
                        $("#imgId").attr('src', imgsrc);
                        getTrade(URL, worker[0].PractisingTrade);
                    }
                }
            });
        }

        function getTrade(URL, practisingTrade) {
            var data = { "ActionType": "gettrade", "ClientVersion": "1.0", "Data": "{\"UserDataGUID\":null,\"ContractDataGUID\":null,\"UserDataCnName\":null,\"UserDataEnName\":null,\"UserDataCWRNo\":null,\"UserDataCardSerialNumber\":null,\"UserDataGreenCardNumber\":null,\"UserDataGreenCardExpiryDate\":null,\"UserDataRegistrationNumber\":null,\"UserDataRegistrationDate\":null,\"UserDataRegistrationExpiryDate\":null,\"UserDataTel\":null,\"UserDataEmail\":null,\"UserDataPhoto\":null,\"UserDataRole\":null,\"UserDataModifiedDate\":null,\"UserDataRemoveDate\":null,\"UserDataTractisingTrade\":null,\"UserDataBiometriTemplateIdentifier\":null,\"UserDataTechnologyType\":null,\"UserDataTimestamp\":null,\"ContractDataID\":null,\"StartDate\":null,\"EndDate\":null,\"Position\":null}" };

            $.post(URL, { bgdata: JSON.stringify(data) }, function (result) {
                result = JSON.parse(result);
                if (result.ActionStatus === "1") {
                    var details = JSON.parse(result.Result);
                    var worker = get(details, "TradeData_Code", practisingTrade);
                    if (worker.length > 0) {
                        var trade = worker[0].TradeData_NameCHi;
                        $("#lblWorkerType").text(trade);
                    }
                }
            });
        }

        function popuTableData(apiHost, cardNo) {
            var URL = apiHost+"iDuty.ashx";            var data = { "ActionType": "getdutylog", "ClientVersion": "1.0", "Data": "{\"UserGUID\":null,\"CWDNumber\":\"" + cardNo + "\",\"DutyStatus\":null,\"CardCheck\":null,\"FaceCheck\":null,\"Coordinate\":null,\"DutyTime\":null}" };            var html = "";
            $.post(URL, { bgdata: JSON.stringify(data) }, function (result) {
                result = JSON.parse(result);
                if (result.ActionStatus === "1") {
                   // var res = JSON.parse(result.Result);
                    details = JSON.parse(result.Result);//get(JSON.parse(result.Result), "UserData_CWRNo", cardNo)
                    $.each(details, function (index, val) {
                        var st = val.DutyLogs_Status == 1 ? "In" : "Out";
                        var fa = val.DutyLogs_FaceCheck == 1 ? "Pass" : "UnPass";
                        html += "<tr>"
                        html += "<td>" + val.DutyLogs_CreateDate + "</td>";
                        html += "<td>" + st + "</td>";
                        html += "<td>" + val.DutyLogs_Coordinate + "</td>";
                        html += "<td>" + fa + "</td>";
                        html += "</tr>";
                    });
                }
                $("#listcontent").html(html);
                $('#in_out_list').DataTable({
                    "paging": false,
                    "filter": false,
                    "info": false
                });
            });
        }

        function get(arrPerson, objPropery, objValue) {
            return $.grep(arrPerson, function (cur, i) {
                return cur[objPropery] == objValue;
            });
        }
    </script>
</body>
</html>
